<template>
    <div class="geo">
        <input type="search" v-model="search" name="" id="" placeholder="请输入城市的名称" @change="getData()">
    </div>
</template>

<script>

import axios from "axios";
import {API_LOCATION, key} from "@/common/constrant";
import {mapActions, mapGetters} from "vuex";

export default {
    name: "GeoLocation",
    data() {
        return {
            search: ""
        }
    },
    computed: {
        ...mapGetters(["getLocation"])
    },
    methods: {
        ...mapActions(['updateLocationAction']),
        getData() {
            axios.get(API_LOCATION, {
                params: {key, location: this.search}
            }).then(({data}) => {
                this.updateLocationAction(data['location'][0])
                console.log(this.getLocation)
            })
        },
    },
}
</script>

<style scoped>

</style>